[warn] --jsx-bracket-same-line is deprecated.
<template>
  <base-content>
    <template>
      <sf-base-search
        ref="baseSearchEle"
        :base-searchs="baseSearchs"
        :base-handles="baseHandles"
        :base-data="baseFormData"
      />

      <sf-grid
        ref="gird"
        :columns="columns"
        :operations="operations"
        :store-config="configs"
      />
    </template>
  </base-content>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryParams } from '@/utils'
import { fetchOrderList } from '@/api/verification'
export default {
  computed: {
    ...mapGetters(['sidebar']),
    routes() {
      return this.$router.options.routes
    }
  },
  data() {
    return {
      baseSearchs: [
        {
          label: '活动时间',
          elType: 'date-time-range',
          placeholder: '请选择活动时间',
          width: '400px',
          value: [],
          name: 'time'
        },
        {
          label: '状态',
          elType: 'select',
          placeholder: '请选择状态',
          value: '',
          name: 'consume_status',
          options: [
            {
              label: '已完成',
              value: 1
            },
            {
              label: '待消费',
              value: 2
            },
            {
              label: '已消费',
              value: 3
            }
          ]
        }
      ],
      baseHandles: [
        {
          btnType: 'primary',
          text: '查询',
          key: 'search',
          handle: this.handleBaseSearch
        },
        {
          btnType: 'default',
          text: '重置',
          key: 'reset',
          handle: this.handleBaseSearch
        }
      ],
      baseFormData: {},
      formData: {
        order_type: 4
      },
      // here is table
      columns: [
        {
          title: '订单id',
          props: 'id'
        },
        {
          title: '订单时间',
          props: 'insert_time'
        },
        {
          title: '用户id',
          props: 'user_id'
        },
        {
          title: '商品id',
          props: 'product_id'
        },
        {
          title: '支付金额',
          props: 'order_amount'
        },
        {
          title: '商品类别',
          formatter(val) {
            const { product_type } = val
            const statusT = { 1: '商品', 2: '服务' }
            return statusT[product_type]
          }
        },
        {
          title: '状态',
          formatter(val) {
            const { consume_status } = val
            const statusT = { 1: '已完成', 2: '待消费', 3: '已消费', 0: '-' }
            return statusT[consume_status]
          }
        },
        {
          title: '支付状态',
          formatter(val) {
            const { pay_status } = val
            const statusT = { 0: '未支付', 1: '已支付', 2: '已支付(拼团失败)', 3: '已取消' }
            return statusT[pay_status]
          }
        }
      ],
      operations: [
        {
          label: '查看消费记录',
          handler: (row) => {
            const { id } = row
            this.$router.push({
              path: '/plantproduct/expense',
              query: {
                id
              }
            })
          }
        }
      ],
      configs: {
        loadDataApi: (p) => {
          return new Promise((resolve) => {
            fetchOrderList(queryParams(p, this.formData)).then((res) => {
              resolve(res)
            })
          })
        },
        fetchListData: function (res) {
          return res.data
        },
        fetchTotal: function (res) {
          return res.meta.count
        },
        generateQueryParams: function (pagination) {
          const { pageIndex, pageSize } = pagination
          return {
            page_size: pageSize,
            page_num: pageIndex
          }
        }
      }
    }
  },
  methods: {
    // val: 当前表单中的数据
    // key 用来handles 中设置的唯一标识key值
    handleBaseSearch(val, key) {
      if (key === 'search') {
        const { time, consume_status } = val
        this.formData = {
          start_time: time && time[0] || '',
          end_time: time && time[1] || '',
          order_type: 4,
          consume_status
        }
        this.$refs.gird.query()
      } else {
        const formEle = this.$refs.baseSearchEle
        formEle.empty()
      }
    }
  }
}
</script>
